<style scoped lang="scss">
.page{
  background: linear-gradient(136deg, #E6EEFF 0%, #F9FBFF 53%, #FFFFFF 100%);
}

.user-info{
  display: flex;
  padding-top: 10rpx;
  padding-left: 25rpx;
  padding-right: 25rpx;

  & > view{
    &:nth-child(1){
      width: 120rpx;
      height: 120rpx;

      image{
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
      }
    }
    &:nth-child(2){
      margin-left: 22rpx;
      margin-right: 22rpx;
      overflow: hidden;
      flex: 1;

      & > view{
        &:nth-child(1){
          @include textOverflow();

          font-size: 32rpx;
          color: #101012;
          height: 80rpx;
          padding-top: 17rpx;
        }
        &:nth-child(2){
          display: flex;
          & > view{
            display: flex;
            align-items: center;
            font-size: 26rpx;

            text{
              width: 36rpx;
              height: 38rpx;
              border-radius: 50%;
              color: #fff;
              display: flex;
              margin-right: 10rpx;
              font-size: 22rpx;
              background: #577BED;
              align-items: center;
              justify-content: center;
            }
          }
        }
      }
    }
    &:nth-child(3){
      display: flex;
      align-items: center;
      font-size: 28rpx;
    }
  }
}
.my-item{
  margin-left: 33rpx;
  margin-right: 33rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
  margin-bottom: 20rpx;

  & > view{
    height: 90rpx;
    line-height: 90rpx;
    display: flex;
    padding-left: 33rpx;
    padding-right: 33rpx;

    & > view{
      &:nth-child(1){
        width: 50rpx;
        text{
          font-size: 40rpx;
        }
      }
      &:nth-child(2){
        margin-left: 20rpx;
        flex: 1;
        font-size: 28rpx;
      }
      &:nth-child(3){
      }
    }
  }
}

.copyright{
  margin-top: 40rpx;
  text-align: center;
  color: #a6a6a6;
}
</style>

<template>
  <view class="page">
    <view class="s-head">
      <h-head bg="transparent">
        个人中心
      </h-head>
    </view>

    <view class="s-body">
      <scroll-view class="maxh" :scroll-y="true">

        <view class="user-info" @click="utils.gotoPage('/pages/my/setting', true)">
          <view>
            <image mode="aspectFill" v-if="userInfo.avatar" :src="userInfo.avatar" alt="" />
            <image mode="aspectFill" v-else src="../../static/images/ai-icon.png" alt="" />
          </view>

          <view>
            <view>
              {{ userInfo.nickname || '用户' }}
            </view>
            <view>
              <view v-if="userInfo.phone">
                <text class="iconfont icon-shouji"></text>
                {{ userInfo.phone }}
              </view>
              <view v-if="userInfo.username">
                <text class="iconfont icon-wode4"></text>
                {{ userInfo.username }}
              </view>
            </view>
          </view>

          <view>
            <text class="iconfont icon-jinru"></text>
          </view>
        </view>

        <view class="my-item mt-40">
          <view @click="utils.gotoPage('/pages/my/agreement?type=5')">
            <view><text style="color: #729CFF;" class="iconfont icon-jiaocheng-3"></text></view>
            <view>使用教程</view>
            <view><text class="iconfont icon-jinru"></text></view>
          </view>
          <view @click="utils.gotoPage('/pages/my/feedback', true)">
            <view><text style="color: #FDC509;" class="iconfont icon-yijianfankui"></text></view>
            <view>意见反馈</view>
            <view><text class="iconfont icon-jinru"></text></view>
          </view>
          <view @click="utils.gotoPage('/pages/my/agreement?type=4')">
            <view><text style="color: #39C6FE;" class="iconfont icon-emiguanyuwomen"></text></view>
            <view>关于我们</view>
            <view><text class="iconfont icon-jinru"></text></view>
          </view>
          <view @click="utils.gotoPage('/pages/my/agreement?type=3')">
            <view><text style="color: #FF9C54;" class="iconfont icon-kefu"></text></view>
            <view>联系客服</view>
            <view><text class="iconfont icon-jinru"></text></view>
          </view>
        </view>

        <!--
          华谷gpt由华谷信息科技独家研发，并不是自由软件，未经许可不能去掉华谷信息科技相关版权或商业用途
         -->
        <view class="copyright">
          由华谷信息科技提供技术支持
        </view>

      </scroll-view>
    </view>

    <view class="s-footer">
      <h-footer active="5"></h-footer>
    </view>
  </view>
</template>

<script>

export default {
  components: {},
  onShow() {
    this.httpClient.post({
      url: this.APIPath.user.info,
      noCheck: true,
      data: {}
    }).then(res => {
      if(res.code === 200) {
        this.userInfo = res.data
      }
    })
  },
  computed: {
    vipText() {
      let str = '未开通'
      if(this.userInfo) {
        if(this.userInfo.vipExpireTime) {
          if(+new Date(this.userInfo.vipExpireTime) > +new Date()) {
            return this.utils.formatDate(+new Date(this.userInfo.vipExpireTime), 'yyyy-MM-dd') + '过期'
          }else{
            return '已过期'
          }
        }
      }
      return str
    },
  },
  onLoad(option) {

  },
  onHide() {
  },
  onUnload() {
  },
  data() {
    return {
      userInfo: {},
    };
  },
  methods: {

  },
};
</script>

